<!--
/**
* Author: zyf
* Date: 2020-07-07 09:51
* Desc: commons 组件调试页  commonsTest
*/
-->
<template>
  <app-container>
    <app-block class="pl10">
      <div>
        <h1>zm-alert</h1>
        <zm-alert type="success" effect="light">2222</zm-alert>
      </div>

      <div>
        <h1>zm-tag</h1>
        <zm-tag>tagtag</zm-tag>
      </div>
      <div>
        <h1>zm-button</h1>
        <zm-button>按钮</zm-button>
        <zm-button @click="$msg.success('添加成功')" t="add" />
        <zm-button @click="testLoc" t="edit" />
        <zm-button t="search" />
        <zm-button t="del" />
      </div>

      <div>
        <h1>zm-input </h1>
        <zm-input class="w200" v-model="inputValue" type="number" placeholder="请输入数字" />
        <zm-input class="w200" v-model="inputValue1" />
      </div>

      <div>
        <h1>zm-data-radio </h1>
        <div>
          <zm-data-radio v-model="radio" k1="orderType" />
        </div>
        <zm-data-radio disabled-value="pos,offline" v-model="radio" k1="orderType">
          <!-- 支持 slot -->
          <template v-slot="item">
            {{item.name}} - {{item.value}}
          </template>
        </zm-data-radio>
      </div>

      <div>
        <h1>zm-data-checkbox </h1>
        <div>
          <div>{{checkbox}}</div>
          <zm-data-checkbox disabled-value="pos,offline" v-model="checkbox" k1="orderType" />
        </div>
      </div>

      <div>
        <h1>zm-data-select</h1>
        <zm-data-select v-model="select" k1="orderType" disabled-value="pos,offline" />

        <zm-data-select v-model="select" k1="orderType" :disabled-value="['pos']">
          <template v-slot="item"> {{item.name}} - {{item.value}}</template>
        </zm-data-select>

        <h3>多选 {{selectmore}}</h3>

        <zm-data-select str multiple v-model="selectmore" k1="orderType" />
        <h3>api {{apiData}}</h3>
        <zm-data-select api="getCompanyList" v-model="apiData" has-all />
      </div>

      <div>
        <h1>zm-time-select</h1>
        <div>
          <zm-time-select v-model="time1" /> {{time1}}
        </div>
      </div>

      <div>
        <h1>zm-time-picker</h1>
        <div>
          <div>
            <zm-time-picker v-model="time2" /> {{time2}}
          </div>
        </div>

        <div>
          <zm-time-picker is-range :target="timeData" start-key="startAt" end-key="endAt" /> {{timeData}}
        </div>
      </div>

      <div>
        <h1>zm-date-select</h1>
        <div>
          <zm-date-picker type="date" v-model="oneDate" />
          {{oneDate}}
        </div>
        <div>
          <h1>zm-date-picker</h1>
          <zm-date-picker :target="date" start-key="startAt" end-key="endAt" />
          {{date}}
        </div>

        <div>
          <zm-date-picker type="datetime" v-model="datetime" />
          {{datetime}}
        </div>

        <div>
          <zm-date-picker has-tip :target="datetimerange" type="datetimerange" start-key="startAt" end-key="endKey" />
          {{datetimerange}}
        </div>
      </div>

      <div>
        <h1>zm-page-bar </h1>
        <zm-page-bar :page-size="100" :total="1000" />
      </div>

      <div>
        <h1>zm-form </h1>
        <my-form />
      </div>

      <div>
        <h1>zm-table </h1>
        <zm-table :data="tableData">
          <zm-table-column type="index" label="序号"> </zm-table-column>
          <zm-table-column prop="name" label="名字"> </zm-table-column>
          <zm-table-column prop="date" is-date label="时间"> </zm-table-column>
          <zm-table-column prop="type" k1="orderType" k-class="TEXT_CLASS" label="类型"> </zm-table-column>
          <zm-table-column prop="status" k1="GOODS_STATUS" label="状态"> </zm-table-column>
          <zm-table-column :render-dom="renderDom" prop="status" k1="GOODS_STATUS" label="状态"> </zm-table-column>
        </zm-table>
      </div>
      <div>
        <h1>zm-table-data </h1>
        <zm-table-data ref="multipleTable" :data="tableParams.data" :columns="columns" :fetch="loadList" :table-params="tableParams" :mutilple="true" :checked="checked">
          <zm-table-column label="dom-操作" width="100">
            <template slot-scope="scope">
              <zm-button type="text" @click="domDetail(scope.row, scope.$index)">详情</zm-button>
            </template>
          </zm-table-column>
        </zm-table-data>
      </div>

      <div>
        <h1>zm-panel</h1>
        <zm-button @click="visible = !visible">openPanel</zm-button>
        <zm-panel v-model="visible" v-if="visible"></zm-panel>
      </div>

      <div>
        <h1>app-block</h1>
        <app-block title="title文本" desc="desc测试文本">
          <p>app-block 测试文本</p>
        </app-block>
      </div>

      <div>
        <h1>app-container</h1>
        <app-container>
          <p>app-container 测试文本</p>
        </app-container>
      </div>
    </app-block>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import panelMixin from '@/mixins/panelMixin'
import { tableColumns } from './const'
import MyForm from './MyForm'
export default {
  name: 'CommonsTest',
  components: { MyForm },
  mixins: [tableMixin, panelMixin],
  data () {
    return {
      visible: false,
      radio: '1',
      selectmore: '',
      columns: tableColumns(this),
      oneDate: '',
      month: '',
      checkbox: '',
      date: {
        startAt: '',
        endKey: ''
      },
      datetime: '',
      time1: '',
      time2: '',
      timeData: {

        endAt: '23:59:59',
        startAt: '00:00:00'
      },
      datetimerange: {
        startAt: '2020-07-24 00:00:00',
        endKey: '2020-08-20 00:05:00'

      },

      select: '',
      apiData: '',
      inputValue: '',
      inputValue1: '',
      tableData: [
        { date: '2016-05-02 10:10:10', name: '王小虎', type: 'offlinelift', status: '1' },
        { date: '2016-05-02 10:10:10', name: '王小虎', type: 'pos', status: '2' },
        { date: '2016-05-02 10:10:10', name: '王小虎', type: '3', status: '1' },
        { date: '2016-05-02 10:10:10', name: '王小虎', type: '4', status: '2' }
      ],
      checked: [],
      renderDom: {

        render (h) {
          // return h('div', 'hahah')
          return <div><zm-button>haha</zm-button></div>
        }
      }
    }
  },
  mounted () {
    this.checked = ['1x', '2x', '11x']
  },
  methods: {
    // 初始化方法
    init () { },
    loadList () {
      let arr = new Array(10).fill({})
      const tableData = arr.map((i, idx) => {
        const num = idx + 1
        const rate = this.tableParams.page === 1 ? 0 : 10
        return {
          ...i,
          id: num + rate + 'x',
          name: num + rate,
          status: '' + this.tableParams.page
        }
      })
      this.initialTableData(tableData, 20)
    },
    domDetail (row, idx) {
      console.log('row', row)
      console.log('index', idx)
    },

    testLoc () {
      // this.$auth.sLoc.set('aaa', {a: 123})
      // this.$auth.sLoc.remove('aaa', {a: 123})
      // let aa = this.$auth.sLoc.get('aaa', {})
      // console.log(aa)
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
